import React from 'react'
import './bootstrap.scss'

import { NavLink, useRoutes } from 'react-router-dom'
import routers from '../../../router/index.js'


/*
BrowserRouter、HashRouter：包裹跟组件
Navigate：自动的导航链接，可以做重定向、编程式导航（这应该直接用钩子useNavigation）
NavLink,Link：导航链接
  - NavLink有高亮
  - Link没有高亮
Outlet：父路由元素中应使用 <Outlet> 来呈现其子路由元素（看成vue里的router-view）


useRoutes：使用路由表
useNavigate:编程式路由
*/ 


export default function A009_Router() {
  let element = useRoutes(routers)
  return (
    <div>
      <h2>A009_Router</h2>

      <div className='router_box'>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>React Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" to="home">Home</NavLink>
              <NavLink className="list-group-item" to="about">About</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {element}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
